<template>
  <div
    class="sider-toggle"
    :class="{ bottom: this.side === 'bottom' }"
    @click="onToggleClick"
  >
    <i :class="direction"></i>
  </div>
</template>

<script>
export default {
  name: 'SiderToggle',
  props: {
    side: {
      type: String,
      default: 'left'
    }
  },
  data () {
    return {
      toggled: false // 是否已经折叠
    }
  },
  computed: {
    direction () {
      if (this.side === 'top') {
        return !this.toggled ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
      } else {
        return !this.toggled ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
      }
    }
  },
  methods: {
    onToggleClick () {
      this.toggled = !this.toggled
      this.$emit('click')
    }
  }
}
</script>
<style lang="scss" scoped>
.sider-toggle {
  height: 0;
  width: 100px;
  border-left: 20px solid transparent;
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
  filter: drop-shadow(0px 4px 4px #e4e4e4);
  cursor: pointer;

  i {
    position: absolute;
    display: inline-block;
    left: 50%;
    top: -18px;
    font-size: 18px;
    transform: translateX(-50%);
  }

  &.bottom {
    border-bottom: none;
    border-top: 20px solid #fff;
    .anticon {
      left: auto;
      bottom: -18px;
    }
  }
}
</style>
